<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <meta content="initial-scale=1.0, user-scalable=no" name="viewport"/>
    <link href="webjars/bootstrap/4.3.1/css/bootstrap.css">
    <script src="webjars/bootstrap/4.3.1/js/bootstrap.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=EOv9kZbkfn3mslhH6BFUL2gaCS8Apf8H"
            type="text/javascript"></script>
    <script src="js/jquery.min.js"></script>

    <style type="text/css">

        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        .contact {
            height: 650px;
            margin: auto;
            width: 88%;
        }

        .search-Top {
            width: 80%;
        }
    </style>

    <title>地图搜索</title>
    <nav th:replace="include/import::import"></nav>

</head>
<body>
<nav th:replace="include/top::top"></nav>

<div class="contact">
    <div class="row">
        <div class="col-md-4 col-xs-2" style="height: 500px;width: 20%; background-color: #d3d3d4;">
            <div class="input-group" style="margin-top: 15px;">
                <span class="input-group-addon" id="basic-addon1">地址：</span>
                <input aria-describedby="basic-addon1" class="form-control" id="keyword" placeholder="Local"
                       type="text">
            </div>
            <input class="btn btn-default" onclick="search()" type="button" value="搜索"/>
        </div>
        <div class="col-md-8 .col-xs-10" id="allmap" style=" width:78%;height: 500px;"></div>
    </div>
</div>
<nav th:include="include/footer::footer"></nav>
</body>
</html>
<script th:inline="javascript" type="text/javascript">
    // 百度地图API功能

    var map = new BMap.Map("allmap");
    map.centerAndZoom("成都", 15);
    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

    function search() {
        var keyword = $("#keyword").val();
        var local = new BMap.LocalSearch(map, {
            renderOptions: {map: map}
        });
        local.search(keyword);
    }

    $(function () {
        var list = [[${session.hotels}]];
        $.each(list, function (index, vals) {
            var point = new BMap.Point(vals.longitude, vals.latitude);
            var marker = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker);
            var sContent =
                "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + vals.hotelTranslatedName + "</h4>" +
                "<img style='float:right;margin:4px' id='imgDemo' src='" + vals.photo2 + "' width='139' height='104' title='" + vals.hotelTranslatedName + "'/>" +
                "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>" + vals.overview + "</p>" +
                "</div>";
            var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
            marker.addEventListener("click", getAttr);

            function getAttr() {
                window.location.href = "/rooms?id=" + vals.hotelId;
            }

            marker.addEventListener("onmouseover", function () {
                this.openInfoWindow(infoWindow);
                //图片加载完毕重绘infowindow
                document.getElementById('imgDemo').onload = function () {
                    infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
                }
            });
            marker.addEventListener("onmouseout", function () {
                this.closeInfoWindow(infoWindow);
                //图片加载完毕重绘infowindow
                document.getElementById('imgDemo').onload = function () {
                    infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
                }
            });
        });
    })


</script>
